<!--商品种类维护-->
<template>
  <div>
    <cus-card :showTitle="false">
      <div class="btnBox">
        <cusButton type="primary" @onClick="onAdd()" style="width:150px;" v-permission="20">添加</cusButton>
      </div>
      <cusTable
        border
        :loading="form.loading"
        :columns="columns"
        :data="data"
        :size="vuex_config.tableSize"
        :bottomClass="['cus-page']"
        :row-class-name="rowClassName"
      >
        <template slot-scope="{ row }" slot="colorCodeOperation">
          <div style="display:flex;justify-content:center;align-items:center;">
            <div
              style="height:25px;width:25px;border-radius:50%;"
              :style="{ background: `${row.colorCode}` }"
            ></div>
          </div>
        </template>
        <!-- <template slot-scope="{ row }" slot="operation">
          <div class="flex">
            <cus-button
              type="text"
              size="small"
              v-permission="30"
              :style="{ color: row.status == 'DISABLE' ? 'green' : '#1E6FFF' }"
              style="padding: 8px"
              @onClick="updateApiProductcategorySwitchStatusApi(row.id)"
            >
              <Icon
                v-if="row.status == 'DISABLE'"
                type="md-checkmark-circle"
                size="4"
                style="margin: 2px 5px 0 0"
              />
              <Icon
                v-if="row.status == 'ENABLE'"
                type="md-remove-circle"
                size="4"
                style="margin: 2px 5px 0 0"
              />
              <span>{{ row.status == "ENABLE" ? "禁用" : "启用" }}</span>
            </cus-button>
            <cus-button
              type="text"
              size="small"
              v-permission="30"
              :style="{ color: '#1E6FFF' }"
              style="padding: 0 8px"
              @onClick="onEdit(row)"
            >
              <Icon
                type="md-color-filter"
                size="4"
                style="margin: 2px 5px 0 0"
              />
              <span>编辑</span>
            </cus-button>
            <cus-button
              type="text"
              size="small"
              v-if="row.isSystem == 0"
              v-permission="40"
              :style="{ color: '#FF4746' }"
              style="padding: 0 8px"
              @onClick="onDelete(row)"
            >
              <Icon type="md-trash" size="4" style="margin: 2px 5px 0 0" />
              <span>删除</span>
            </cus-button>
          </div>
        </template> -->
      </cusTable>
      <div class="cus_page">
        <cus-page
          :data="pages"
          class="mt_20"
          @pageChange="getApiProductcategoryListApi()"
        ></cus-page>
      </div>
    </cus-card>
    <!--添加商品类别-->
    <addProductCategory ref="addProductCategory"></addProductCategory>
  </div>
</template>

<script>
import {
  getApiProductcategoryList,
  updateApiProductcategorySwitchStatus,
  deleteApiProductcategory
} from "@/api/business/manager";

import addProductCategory from "./components/addProductCategory.vue";

export default {
  components: { addProductCategory },
  data() {
    return {
      ruleValidate: {},
      form: {},
      loading: false,
      data: [],
      columns: [
        {
          title: "序号",
          width: 70,
          type: "index",
          align: "center"
        },
        {
          title: "分类名称",
          key: "categoryName",
          align: "center",
          minWidth: 125
        },
        {
          title: "创建时间",
          key: "createTime",
          align: "center",
          minWidth: 135
        },
        {
          title: "状态",
          key: "status",
          align: "center",
          minWidth: 135,
          render: (h, params) => {
            return h("div", [
              h(
                "span",
                {},
                params.row.status == 'ENABLE' ? "已启用" : "已禁用"
              )
            ]);
          }
        },
        {
          title: "是否系统模式",
          key: "isSystem",
          align: "center",
          minWidth: 135,
          render: (h, params) => {
            return h("div", [
              h(
                "span",
                {},
                params.row.isSystem == 1 ? "是(系统模式不可删除)" : "否"
              )
            ]);
          }
        },
        {
          title: "颜色",
          slot: "colorCodeOperation",
          align: "center",
          minWidth: 125
        },
        // {
        //   title: "操作",
        //   width: 245,
        //   fixed: "right",
        //   slot: "operation",
        //   align: "center"
        // }
      ],
      pages: {
        page: 1,
        pageSize: 10,
        pageTotal: 0
      }
    };
  },
  mounted() {
    this.onInit();
  },
  methods: {
    // 初始化
    onInit() {
      this.getApiProductcategoryListApi();
    },
    // 重置搜索
    reset() {
      this.$refs["formValidate"].resetFields();
      this.onInit();
    },
    // 添加
    onAdd() {
      this.$refs["addProductCategory"].show();
    },
    // 编辑
    onEdit(row) {
      this.$refs["addProductCategory"].form = this.$cu.deepClone(row);
      this.$refs["addProductCategory"].show();
    },
    onDelete(row) {
      this.$cu
        .dialog({
          params: row
        })
        .then(({ id }) => {
          this.deleteApiProductcategoryApi(id);
        });
    },
    // 商品种类列表---------------------接口
    getApiProductcategoryListApi() {
      this.loading = true;
      return new Promise(resolve => {
        let params = {
          current: this.pages.page,
          size: this.pages.pageSize
        };
        getApiProductcategoryList(params).then(res => {
          this.loading = false;
          if (res.retCode == 2000) {
            this.data = res.data.records;
            this.pages.pageTotal = res.data.total;
            resolve();
          }
        });
      });
    },
    // 更改状态---------------------接口
    updateApiProductcategorySwitchStatusApi(id) {
      this.loading = true;
      return new Promise(resolve => {
        updateApiProductcategorySwitchStatus({ id: id }).then(res => {
          this.loading = false;
          if (res.retCode == 2000) {
            this.onInit();
            resolve();
          }
        });
      });
    },
              // 判断禁用用户行的颜色
              rowClassName(row,index) {
       if (row.status == 'DISABLE') {
      	return 'table-select-row'
  } 
    },
    // 删除数据----------------------------接口
    deleteApiProductcategoryApi(id) {
      this.loading = true;
      return new Promise(resolve => {
        deleteApiProductcategory({ id: id }).then(res => {
          this.loading = false;
          if (res.retCode == 2000) {
            this.onInit();
            resolve();
          }
        });
      });
    }
  }
};
</script>

<style lang="less" scoped>
.btnBox {
  padding-bottom: 20px;
  display: flex;
  justify-content: flex-end;
}
::v-deep .table-select-row td {
  background-color: #f6f6f6 !important;
}
</style>
